<template>
  <div class="sku_con">
    <el-table
      :data="skus"
      border
      style="width: 95.2%; margin: 0px auto"
      size="medium"
    >
      <el-table-column prop="id" label="id" width="100"> </el-table-column>
      <el-table-column prop="name" label="商品SKU名"> </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>
      <el-table-column prop="stock" label="库存"> </el-table-column>
      <el-table-column prop="sales" label="销量"> </el-table-column>
      <el-table-column prop="cate_name" label="分类"> </el-table-column>
      <el-table-column label="上下架">
        <template slot-scope="scope">
          <span>{{ scope.row.is_selling ? "上架" : "下架" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="fnPopShow(scope.row.id)"
            >修改</el-button
          >
          <el-button size="mini" type="danger" @click="fnDelSku(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑的对话框 -->
    <el-dialog
      title="修改商品"
      :visible.sync="pop_show"
      append-to-body
      width="60%"
    >
      <el-form
        :model="skuForm"
        :inline="true"
        status-icon
        ref="userForm"
        label-width="100px"
      >

        <el-form-item label="名称:" prop="name">
          <el-input
            type="text"
            v-model="skuForm.name"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>

        <el-form-item label="副标题:" prop="caption">
          <el-input
            type="text"
            v-model="skuForm.describe"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>

        <el-form-item label="价格:" prop="price">
          <el-input
            type="text"
            v-model="skuForm.price"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>

        <el-form-item label="进价:" prop="price">
          <el-input
            type="text"
            v-model="skuForm.price"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>

        <el-form-item label="市场价:" prop="price">
          <el-input
            type="text"
            v-model="skuForm.price"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>

        <el-form-item label="库存:" prop="stock">
          <el-input
            type="text"
            v-model="skuForm.stock"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        
        <el-form-item label="分类:" prop="cate">
          <el-select v-model="skuForm.cate" size="small">
            <el-option
              v-for="item in category_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="上下架:" prop="is_selling">
          <el-radio v-model="skuForm.is_selling" :label="true">是</el-radio>
          <el-radio v-model="skuForm.is_selling" :label="false">否</el-radio>
        </el-form-item>

        <el-form-item label="SPU" prop="spu_id">
          <el-select
            v-model="skuForm.spu_id"
            size="small"
            @change="skuForm.specs = {}"
          >
            <el-option
              v-for="item in spus_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          v-for="item in specs_list"
          :label="item.name"
          :key="item.id"
        >
          <el-select v-model="skuForm.specs[item.id]" size="small">
            <el-option
              v-for="opt in item.options"
              :key="opt.id"
              :label="opt.value"
              :value="opt.id"
            >
            </el-option>
          </el-select> </el-form-item
        ><br />
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="pop_show = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import cons from "@/components/constant";
let token = localStorage.token;
export default {
  name: "SkuTable",
  // 接收父组件传来的值
  props: ["skus"],
  data() {
    return {
      pop_show: false,
      edit_id: "",
      skuForm: {
        name: "",
        spu_id: "",
        describe: "",
        cate: "",
        price: "",
        cost_price: "",
        market_price: "",
        stock: "",
        is_selling: "",
        // specs: {},
        // spu_name: "",
        cate_name: "", // 分类的名字
      },
      // 所有分类
      category_list: [],
      spus_list: [],  // 所有spu数据
      specs_list: [],
    };
  },
  methods: {
    // 获取一级分类信息
    fnGetCategory() {
      this.axios
        .get(cons.apis + "/v1/goods/firstCates/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((res) => {
          this.category_list = res.data;
        })
        .catch((err) => {
          console.log(err.response);
        });
    },
    // 获得所有spu数据
    fnGetspus() {
      this.axios
        .get(cons.apis + "/v1/goods/spus/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((res) => {

          this.spus_list = res.data;
        })
        .catch((err) => {
          console.log(err.response);
        });
    },

    // 点击修改按钮触发的方法
    fnPopShow(id) {
      // 显示弹窗
      this.pop_show = true;
      // console.log("id>>",id)
      this.edit_id = id;
      this.axios
        .get(cons.apis + "/v1/goods/skus/" + this.edit_id + "/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((res) => {
          //  console.log("category_id>>>",dat.data.cate)
          // console.log("specs>>>", dat.data)
          this.skuForm.name = res.data.name;
          this.skuForm.describe = res.data.describe;
          this.skuForm.price = res.data.price;
          this.skuForm.market_price = res.data.price;
          this.skuForm.cost_price = res.data.price;
          this.skuForm.stock = res.data.stock;
          this.skuForm.is_selling = res.data.is_selling;
          this.skuForm.cate = res.data.cate; // 分类的id
          this.skuForm.cate_name = res.data.cate_name; // 分类的名字
          // this.skuForm.spu_name = res.data.spu_name; // spu的名字
          this.skuForm.spu_id = res.data.spu; // spu的id

          //   this.axios.get(cons.apis + '/skus/'+ id + '/', {
          //   headers: {
          //     'Authorization': 'JWT ' + token
          //   },
          //   responseType: 'json',
          // })
          // .then(dat=>{
          // 	this.edit_id = dat.data.id;
          //   this.skuForm.name = dat.data.name;
          // this.skuForm.spu_id = dat.data.spu_id;
          // this.skuForm.caption = dat.data.caption;
          // this.skuForm.category_id = dat.data.category_id;
          // this.skuForm.price = dat.data.price;
          // this.skuForm.cost_price = dat.data.cost_price;
          // this.skuForm.market_price = dat.data.market_price;
          // this.skuForm.stock = dat.data.stock;
          // this.skuForm.is_selling = dat.data.is_selling;

          // var specs_data_list = {};
          // for(var i=0;i<dat.data.specs.length;i++){
          // 	specs_data_list[dat.data.specs[i].spec_id] = dat.data.specs[i].option_id;
          // }
          // this.skuForm.specs =specs_data_list;
          // this.pop_show = true;

          // }).catch(err=>{
          //    console.log(err.response);
          // });
        })
        .catch((err) => {
          console.log(err.response);
        });
    },
    // 提交
    submitForm() {

      this.axios
        .put(
          cons.apis + "/v1/goods/skus/" + this.edit_id + "/",
          {
            name: this.skuForm.name,
            spu: this.skuForm.spu_id,
            describe: this.skuForm.describe,
            cate: this.skuForm.cate, // TODO 分类的id
            price: this.skuForm.price,
            // cost_price: this.skuForm.cost_price,
            // market_price: this.skuForm.market_price,
            stock: this.skuForm.stock,
            is_selling: this.skuForm.is_selling,
            image_default:'/static/images/phone'
          },
          {
            headers: {
              Authorization: "JWT " + token,
            },
            responseType: "json",
          }
        )
        .then((res) => {
          console.log('更新sku响应',res);
          this.$message({
            type: "success",
            message: "商品修改成功!",
          });
          this.pop_show = false;
          this.$emit("fnResetTable");
        })
        .catch((err) => {
          if (err.response.status == 400) {
            this.$message({
              type: "info",
              message: err.response.data.name[0],
            });
          }
        });
    },

    fnDelSku(id) {
      this.edit_id = id;
      this.$confirm("此操作将删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .delete(cons.apis + "/v1/goods/skus/" + this.edit_id + "/", {
              headers: {
                Authorization: "JWT " + token,
              },
              responseType: "json",
            })
            .then((res) => {
              if (res.status == 204){
                this.$message({
                type: "success",
                message: "删除成功!",
              });
              // 刷新页面
              this.$emit("fnResetTable");
              }else{
                this.$message({
                  type:'error',
                  massage:'删除失败'
                })
              }
            })
            .catch((err) => {
              if (err.response.status == 404) {
                this.$message({
                  type: "info",
                  message: "商品未找到！",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

  },
  computed: {
    look_good_id() {
      return this.skuForm.spu_id;
    },
  },
  watch: {
    // look_good_id(newVal,oldVal){
    //    this.fnGetSpecs();
    // }
  },
  mounted() {
    // 加载所有一级类别
    this.fnGetCategory();
    // 加载所有SPU数据
    this.fnGetSPUs();
  },
};
</script>
<style>
.el-button + .el-button {
  margin-left: 0px;
  margin-top: 10px;
}
</style>
